<template>
  <div class="upgrade-dialog-wrap">
    <el-dialog
      :visible.sync="visible1"
      width="800px"
      :before-close="setStorageCloseTime"
    >
      <div class="upgrade-dialog-content bg-sz-100" :style="{'background-image': `url(${upgrade_bg1})`}">
        <div class="upgrade-dialog-header mar-b-12">
          <img class="upgrade-dialog-header-img" :src="upgrade_image" />
          <p class="upgrade-dialog-header-title">{{ $t('smartPlan.upgrade.upgradeToSmartPlan') }}</p>
        </div>
        <div class="upgrade-dialog-tip"><span class="font-w-600">{{ $t('smartPlan.title') }}</span>: {{ $t('smartPlan.upgrade.text1') }}</div>
        <div class="upgrade-dialog-tip mar-b-12">
          <i18n path="smartPlan.upgrade.text2">
            <span class="font-w-600" place="data">{{ $t('smartPlan.upgrade.text3') }}</span>
          </i18n>
        </div>
        <div class="upgrade-dialog-bg mar-b-12">
          <img :src="upgrade_bg2" />
        </div>
        <div class="upgrade-dialog-bottom">
          <el-button v-if="isSystemAdmin" type="primary" class="mar-r-20" :disabled="pending" @click="upgrade">{{ $t('smartPlan.upgrade.btn1') }}</el-button>
          <el-button class="border-gray" @click="viewDetail">{{ $t('common.base.checkDetail') }}</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="visible2"
      width="600px"
    >
      <div class="upgrade-dialog-content pad-48" :style="{'background-image': `url(${upgrade_bg1})`}">
        <div class="upgrade-dialog-header mar-b-16">
          <img class="upgrade-dialog-header-img" :src="upgrade_image" />
          <p class="upgrade-dialog-header-title">{{ $t('smartPlan.upgrade.upgradeToSmartPlan') }}</p>
        </div>
        <div class="upgrade-dialog-tip">{{ $t('smartPlan.upgrade.text4') }}</div>
        <div class="upgrade-dialog-tip mar-b-16">{{ $t('smartPlan.upgrade.text5') }}</div>
        <div class="upgrade-dialog-loading">
          <i class="el-icon-loading"></i>
          <span class="mar-l-5">{{ $t('smartPlan.upgrade.upgrading') }}</span>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="visible3"
      width="600px"
      :before-close="refreshPage"
    >
      <div class="upgrade-dialog-content pad-48" :style="{'background-image': `url(${upgrade_bg1})`}">
        <div class="upgrade-dialog-header mar-b-16">
          <img class="upgrade-dialog-header-img" :src="upgrade_image" />
          <p class="upgrade-dialog-header-title">{{ $t('smartPlan.upgrade.upgradeFinished') }}</p>
        </div>
        <div class="upgrade-dialog-tip">{{ $t('smartPlan.upgrade.text6') }}</div>
        <div class="upgrade-dialog-tip mar-b-44">{{ $t('smartPlan.upgrade.text7') }}</div>
        <div class="upgrade-dialog-bottom">
          <el-button type="primary" @click="refreshPage">{{ $t('smartPlan.upgrade.btn2') }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* util */ 
import { getRootWindow } from '@src/util/dom'
import { getOssUrl } from '@src/util/assets'
import { safeNewDate } from '@src/util/time'
import { storageGet, storageSet } from '@src/util/storage';
/* service */ 
import { isSystemAdmin } from '@service/RoleService.ts'

const upgrade_bg1 = getOssUrl('/smartPlan/upgrade_bg1.png')
const upgrade_bg2 = getOssUrl('/smartPlan/upgrade_bg2.png')
const upgrade_image = getOssUrl('/smartPlan/upgrade_image.png')
const upgrade_success = getOssUrl('/smartPlan/upgrade_success.png')

export default {
  name: 'upgrade-to-smart-plan-dialog',
  data() {
    return {
      upgrade_bg1,
      upgrade_bg2,
      upgrade_image,
      upgrade_success,
      visible1: false,
      visible2: false,
      visible3: false,
      pending: false,
    }
  },
  computed: {
    /* 是否是系统管理员 */
    isSystemAdmin () {
      const rootWindow = getRootWindow(window)
      let roles = rootWindow?.loginUser?.roles || []
      return roles.some(role => isSystemAdmin(role))
    },
  },
  mounted() {
    this.isShowDialog()
    // 升级智能计划返回结果处理
    window.addEventListener('message', event => {
      if (event?.data?.action == 'upgradeToSmartPlanRes') {
        this.handleUpgradeToSmartPlanRes(event.data.data)
      }
    });
  },
  methods: {
    openDialog() {
      if (this.pending) {
        this.visible1 = false
        this.visible2 = true
      } else {
        this.visible1 = true
        this.visible2 = false
      }
    },
    // 是否显示弹窗
    isShowDialog() {
      const closeTime = storageGet('close_upgrade_to_smart_plan_dialog_time')
      if (!closeTime) {
        this.visible1 = true
      } else {
        // 距离上次关闭弹窗时间大于两周时显示弹窗
        if (this.isMoreThanTwoWeeksAgo(closeTime)) {
          this.visible1 = true
        } else {
          this.visible1 = false
        }
      }
    },
    // 间隔是否大于两周
    isMoreThanTwoWeeksAgo(timestamp) {
      const now = new Date().getTime()
      const diff = now - timestamp
      const weeksDiff = diff / (1000 * 60 * 60 * 24 * 7)
      return weeksDiff > 2
    },
    // 设置缓存关闭弹窗时间
    setStorageCloseTime() {
      this.visible1 = false
      storageSet('close_upgrade_to_smart_plan_dialog_time', safeNewDate().getTime())
    },
    // 立即升级
    upgrade() {
      this.pending = true
      this.visible1 = false
      window.parent.postMessage('upgradeToSmartPlan')
      setTimeout(() => {
        this.visible2 = true
        this.visible3 = false
      }, 300)
    },
    // 升级结果
    handleUpgradeToSmartPlanRes(res) {
      this.visible1 = false
      this.visible2 = false
      if (res.succ) {
        setTimeout(() => {
          this.visible3 = true
        }, 300)
      } else {
        setTimeout(() => {
          this.visible1 = true
        }, 300)
      }
    },
    // 查看详情
    viewDetail() {
      this.$platform.openLink('https://doc.shb.ltd/shb_xoqazk/eka8tf9wv8x43arx/nxzgsum3qw5z6q5f.html')
    },
    // 刷新页面
    refreshPage() {
      this.visible3 = false
      const rootWindow = getRootWindow(window)
      rootWindow.location.href = '/'
    },
  }
}
</script>

<style lang="scss" scoped>
.upgrade-dialog-wrap {
  ::v-deep .el-dialog__body {
    padding: 0;
  }
  ::v-deep .el-dialog .el-dialog__header {
    background: #fff;
    padding: 0;
  }
  ::v-deep .el-dialog__headerbtn {
    top: 10px !important;
    right: 12px !important;
    font-size: 20px;
  }
  ::v-deep .el-button--small:not(.el-button--text) {
    padding: 12px 20px;
  }
  .upgrade-dialog-content {
    padding: 32px;
    background-size: cover;
    background-repeat: no-repeat;
    &.bg-sz-100 {
      background-size: 100% 100%;
    }
    &.pad-48 {
      padding: 52px 48px;
    }
    .upgrade-dialog-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 134px;
      &-img {
        width: 100px;
        height: 100px;
      }
      &-title {
        line-height: 34px;
        font-size: 24px;
        font-weight: 500;
        color: #262626;
      }
    }
    .upgrade-dialog-tip {
      line-height: 22px;
      font-size: 14px;
      text-align: center;
      color: #595959;
      &.mar-b-44 {
        margin-bottom: 44px;
      }
    }
    .upgrade-dialog-bg {
      img {
        width: 100%;
        height: 100%;
      }
    }
    .upgrade-dialog-bottom {
      display: flex;
      justify-content: center;
      .mar-r-20 {
        margin-right: 20px;
      }
      .border-gray {
        border: 1px solid #CBD6E2;
      }
    }
    .upgrade-dialog-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      ::v-deep .el-icon-loading {
        font-size: 20px;
        color: $color-primary-light-6;
      }
      span {
        color: #262626;
        font-size: 16px;
      }
    }
  }
}
</style>